<template>
  <div>
    <yt-crud
      v-bind="options"
      ref="crudRef"
      @onLoad="getData"
      :fun-props="{
        addBtn: true,
        exportBtn: true,
        delBtn: false,
      }"
      :table-props="{
        selection: true,
        delBtn: false,
        viewBtn: true,
        editBtn: false,
        menuSlot: true,
        menuWidth: 150,
      }"
      :form-props="{
          loading: state.form.loading,
      }"
      :loading="state.loading"
      :total="state.total"
      v-model:page="state.page"
      v-model:query="state.query"
      @saveFun="onSave"
      @openBeforeFun="openBeforeFun"
      @change="onChange"
      @exportFun="handleExport"
    >
      <template #rightToolbar></template>
      <template #state="scope:any">
        <DictTag :options="TopupStateEnum" :value="scope.row.state" />
      </template>

      <template #refundLocked="scope:any">
        <DictTag :options="LockEnum" :value="scope.row.refundLocked" />
      </template>

      <template #source="scope:any">
        <span><DictTag :options="TopupSourceEnum" :value="scope.row.source" /></span>
      </template>

      <template #rechargeType="scope:any">
        <DictTag v-if="scope.row.rechargeType" :options="RechargeTypeEnum" :value="scope.row.rechargeType" />
        <span v-else>-</span>
      </template>

      <template #paymentName="scope:any">
        <span>{{scope.row.paymentName || '-'}}</span>
      </template>
    </yt-crud>
  </div>
</template>

<script lang="ts" setup>
import { IColumn } from '@/components/common/types/tableCommon'
import { list, save, Api } from '@/api/business/topup'

import YtCrud from '@/components/common/yt-crud.vue'
import {ComponentInternalInstance} from 'vue'
import {useI18n} from 'vue-i18n'
const { t } = useI18n()

const { proxy } = getCurrentInstance() as ComponentInternalInstance
const { TopupStateEnum, TopupSourceEnum, RechargeTypeEnum, LockEnum } = toRefs<any>(proxy?.useEnum('topup_state_enum', 'topup_source_enum', 'recharge_type_enum', 'lock_enum'))

const state = reactive({
  page: {
    pageNum: 1,
  },
  form: {
    loading: false,
  },
  total: 0,
  loading: false,
  query: {
  },
})

//字典
const column = ref<IColumn[]>([
  {
    label: t('business.topup.tranId'),
    key: 'tranId',
    align:'center',
    search: false,
    formHide: true,
    slot: false,
  },
  {
    label: t('business.topup.source'),
    key: 'source',
    type: 'select',
    align:'center',
    search: false,
    formHide: true,
    slot: true,
  },
  {
    label: t('business.topup.rechargeType'),
    key: 'rechargeType',
    type: 'select',
    align:'center',
    search: false,
    formHide: true,
    slot: true,
  },
  {
    label: t('business.topup.paymentName'),
    key: 'paymentName',
    type: 'select',
    align:'center',
    search: false,
    formHide: true,
    slot: true,
  },
  {
    label: t('business.topup.customerId'),
    searchLabelWidth:80,
    key: 'userName',
    align:'center',
    search: true,
    formHide: true,
    colSpan: 22,
  },
  {
    label: t('business.topup.customerId'),
    searchLabelWidth:80,
    key: 'customerId',
    align:'center',
    type: 'selectCustomer',
    hide: true,
    search: false,
    formHide: false,
    colSpan: 22,
    rules: [{ required: true, message: t('business.topup.validator.customerId') }],
  },

  {
    label: t('business.topup.topupAmount'),
    key: 'topupAmount',
    type: 'number',
    rules: [{ required: true, message: t('business.topup.validator.amount') }],
    search: false,
    formHide: true,
    slot: false,
  },
  {
    label: t('business.topup.payAmount'),
    key: 'paidAmount',
    type: 'number',
    rules: [{ required: true, message: t('business.topup.validator.amount') }],
    search: false,
    formHide: true,
    slot: false,
  },
  {
    label: t('business.topup.arrivalAmount'),
    key: 'arrivalAmount',
    type: 'number',
    rules: [{ required: true, message: t('business.topup.validator.amount') }],
    componentProps: {
      style: 'width: 100%',
      min: 1,
      max: 999,
      precision: 2,
    },
    search: false,
    formHide: false,
    slot: false,
  },
  {
    label: t('business.topup.refundedAmount'),
    key: 'refundedAmount',
    type: 'number',
    search: false,
    formHide: true,
    slot: false,
  },
  {
    label: t('business.topup.refundLocked'),
    key: 'refundLocked',
    type: 'select',
    searchLabelWidth:120,
    componentProps: {
      options: LockEnum,
    },
    search: true,
    formHide: true,
    slot: true,
  },
  {
    label: t('business.coupon.state'),
    key: 'state',
    type: 'select',
    componentProps: {
      options: TopupStateEnum,
      style: {
        width: '120px'
      }
    },
    search: true,
    formHide: true,
    slot: true,
  },
  {
    label: t('crud.table.column.note'),
    key: 'note',
    hide: true,
    formHide: false,
    colSpan: 22,
    componentProps: {
      type: 'textarea',
      rows: 5,
    }
  },
  {
    label: t('business.topup.payTime'),
    key: 'payTime',
    sortable: true,
    type: 'date',
    formHide: true,
  },
  {
    label: t('crud.table.column.createTime'),
    key: 'createTime',
    sortable: true,
    type: 'date',
    formHide: true,
  },
])

const crudRef = ref()
const data = ref<any[]>([])
const getData = () => {
  state.loading = true
  list({
    ...state.page,
    ...state.query,
  })
    .then((res) => {
      data.value = res.data.rows
      state.total = res.data.total
    })
    .finally(() => {
      state.loading = false
    })
}

// 导出
const handleExport = () => {
  proxy?.download(Api.export, state.query, `topup_${new Date().getTime()}.xlsx`)
}
// 保存数据
const onSave = async ({ data, cancel }: any) => {
  state.form.loading = true
  await save(toRaw(data))
  state.form.loading = false
  ElMessage.success(t('operate.tooltip.success'))
  cancel()
  getData()
}
// 弹窗前置操作
const openBeforeFun = ({ type}) => {
  if (type === 'add') { /* empty */ } else if (type === 'update') { /* empty */ }
}

const multipleSelection = ref<{ deviceId: string }[]>([])

const onChange = (data) => {
  multipleSelection.value = data
}

const options = reactive({
  ref: 'crudRef',
  data,
  column,
})
</script>
